import { useState, useEffect } from 'react';

export default function App() {
  // Auth0 Configuration - Your actual Auth0 credentials
  const AUTH0_DOMAIN = 'ahnaflegaldatabase.au.auth0.com';
  const AUTH0_CLIENT_ID = 'UXoGRxPU4l2tZdNyECGOMLnJendWpPsn';
  const AUTH0_REDIRECT_URI = window.location.origin;

  // Authentication state
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [showLogin, setShowLogin] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [authError, setAuthError] = useState('');

  // Auth0 token and user management
  const [accessToken, setAccessToken] = useState(null);

  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [showAddForm, setShowAddForm] = useState(false);
  const [notification, setNotification] = useState({ message: '', type: '' });
  const [selectedDoc, setSelectedDoc] = useState(null);
  const [filters, setFilters] = useState({
    type: '',
    jurisdiction: '',
    dateFrom: '',
    dateTo: ''
  });
  const [showFilters, setShowFilters] = useState(false);
  const [searchHistory, setSearchHistory] = useState([]);
  
  // Load documents from localStorage or use default data
  const loadDocumentsFromStorage = () => {
    try {
      const stored = localStorage.getItem('aharenge_documents');
      if (stored) {
        return JSON.parse(stored);
      }
    } catch (error) {
      console.error('Error loading documents from storage:', error);
    }
    // Return default sample data if nothing stored or error occurred
    return [
    {
      id: 1,
      type: 'case_law',
      title: 'Smith v. Jones',
      dhivehi_title: 'ސްމިތް ވީ. ޖޯންސް',
      jurisdiction: 'California',
      date: '2022-03-15',
      citation: '123 Cal. App. 4th 567 (2022)',
      keywords: ['contract', 'employment', 'breach'],
      judges: ['Justice Williams', 'Justice Chen', 'Justice Rodriguez'],
      introduction: {
        en: 'This case involves a breach of contract dispute between an employer and employee regarding non-compete clauses and severance agreements.',
        dv: 'މި ކޭސް އަކީ މުވައްޒަފާއި މުވައްޒަފުގެ ދަށުން ކޮންޓްރެކްޓް ބްރީޗް ދެކޮޅަށް ވާ ކޭސެކެވެ.'
      },
      ratio: {
        en: 'The court held that failure to fulfill contractual obligations constitutes breach when material terms are violated without justification.',
        dv: 'ކޯޓުން ނިންމީ ކޮންޓްރެކްޓް އޮބްލިގޭޝަންތައް ފުރިހަމަ ނުކުރުމަކީ ބްރީޗް ކަމުގައެވެ.'
      },
      abstracts: [
        {
          en: 'In the matter of Smith v. Jones, the court ruled on the enforceability of non-compete clauses in employment contracts.',
          dv: 'ސްމިތް ވީ. ޖޯންސް ކޭސްގައި ކޯޓުން ނިންމީ ނޮން-ކޮމްޕީޓް ކްލޯސްތަކުގެ ބާރަށް ޢަމަލުކުރެވޭ ކަމެވެ.',
          page: 'p. 567',
          paragraph: '¶ 12'
        }
      ]
    },
    {
      id: 2,
      type: 'statute',
      title: 'Consumer Protection Act',
      dhivehi_title: 'ސަރުކާރުގެ ޙިމާޔަތުގެ ޤާނޫނު',
      jurisdiction: 'Federal',
      date: '2023-01-20',
      citation: '15 U.S.C. § 1681',
      keywords: ['consumer', 'protection', 'fraud', 'warranty'],
      body: {
        en: 'This statute provides comprehensive consumer protection measures against fraudulent business practices and defective products. It establishes clear guidelines for warranty claims, refund policies, and dispute resolution mechanisms.',
        dv: 'މި ޤާނޫނުން ފުރިހަމަ ކަސްޓަމަރުގެ ޙިމާޔަތް ފޯރުކޮށްދޭ ފުރޯޑް އަދި ކްރޮޅު ތަކެތީގެ ކުރިއެރުން. މި ޤާނޫނުން ވޮރަންޓީ ކްލެއިމް، ރިފަންޑް ޕޮލިސީ އަދި ޑިސްޕިއުޓް ރިޒޮލިއުޝަން މެކެނިޒަމަށް ސާފު ގައިޑްލައިން ބަޔާންކޮށްދެއެވެ.'
      }
    },
    {
      id: 3,
      type: 'legal_article',
      title: 'Recent Developments in Contract Law',
      dhivehi_title: 'ކޮންޓްރެކްޓް ލޯގެ އެއްވެރި ކުރިމަތިއްޔާއިގެ އެއްވެރި ކުރިމަތިއްޔާ',
      jurisdiction: 'International',
      date: '2024-05-15',
      citation: 'Int\'l L.J. 2024 Vol. 1',
      keywords: ['contract', 'law', 'development', 'analysis'],
      body: {
        en: 'This article analyzes recent developments in contract law across multiple jurisdictions, focusing on digital contracts, force majeure clauses, and evolving standards of good faith. The analysis covers landmark cases, statutory reforms, and emerging legal principles that shape modern contractual relationships.',
        dv: 'މި އަރިކަލް ކޮންޓްރެކްޓް ލޯގެ އެއްވެރި ކުރިމަތިއްޔާ ބާރުކުރެވޭ އެވެ، ޑިޖިޓަލް ކޮންޓްރެކްޓް، ފޮސް މާޖުރް ކްލޯސް، އަދި ގޫމް ފޭތް ސްޓެންޑާރޑްތަކުގެ އެއްވެރި ކުރިމަތިއްޔާ ރިވިއު ކުރެއެވެ. މި ބާރުކުރުމުގައި ލޭންޑްމާކް ކޭސްތައް، ޤާނޫނީ ރިފޯމް، އަދި މޮޑަން ކޮންޓްރެކްޗުއަލް ރިލޭޝަންޝިޕްތައް ޝޭޕްކުރާ އިމަރޖިންގ ލީގަލް ޕްރިންސިޕަލްތައް ހިމެނެއެވެ.'
      }
    },
    {
      id: 4,
      type: 'case_law',
      title: 'Johnson v. Pacific Corp',
      dhivehi_title: 'ޖޮންސަން ވީ. ޕެސިފިކް ކޯޕް',
      jurisdiction: 'New York',
      date: '2023-11-08',
      citation: '2023 NY Slip Op 05234',
      keywords: ['corporate', 'liability', 'negligence', 'damages'],
      judges: ['Judge Thompson', 'Judge Martinez'],
      introduction: {
        en: 'A landmark case establishing corporate liability standards for negligent supervision in workplace accidents.',
        dv: 'މަސައްކަތުގެ ތަނުގެ ހާދިސާތަކުގައި ނެގްލިޖަންޓް ސުޕަވިޝަންއަށް ކޯޕޮރޭޓް ލަޔަބިލިޓީ ސްޓެންޑަރޑް ޤާއިމްކުރި މުހިންމު ކޭސެކެވެ.'
      },
      ratio: {
        en: 'Corporations have a non-delegable duty to ensure adequate supervision of safety protocols.',
        dv: 'ކޯޕޮރޭޝަންތަކުން ސޭފްޓީ ޕްރޮޓޮކޯލްތަކުގެ ފުރިހަމަ ސުޕަވިޝަން ކަށަވަރު ކުރުމުގެ މަސްއޫލިއްޔަތެއް އެވެ.'
      },
      abstracts: [
        {
          en: 'The court found that Pacific Corp failed to implement adequate safety measures despite prior warnings.',
          dv: 'ކޯޓުން ފެނުނީ ޕެސިފިކް ކޯޕްއަށް ކުރިން ވާރުނިންގް ދީފިނަމަވެސް ފުރިހަމަ ސޭފްޓީ މިންހާސް ޢަމަލުކުރެއްނުވި ކަމެވެ.',
          page: 'p. 234',
          paragraph: '¶ 45'
        }
      ]
    },
    {
      id: 5,
      type: 'statute',
      title: 'Data Privacy Protection Act',
      dhivehi_title: 'ޑޭޓާ ޕްރައިވަސީ ޙިމާޔަތުގެ ޤާނޫނު',
      jurisdiction: 'California',
      date: '2024-01-01',
      citation: 'Cal. Civ. Code § 1798.100',
      keywords: ['privacy', 'data', 'protection', 'rights'],
      body: {
        en: 'This act establishes comprehensive data privacy rights for California residents, including the right to know, delete, and opt-out of the sale of personal information. Companies must provide clear disclosures about data collection practices and implement reasonable security measures.',
        dv: 'މި ޤާނޫނުން ކެލިފޯނިޔާ ރެސިޑެންޓްތަކަށް ފުރިހަމަ ޑޭޓާ ޕްރައިވަސީ ޙައްޤުތައް ޤާއިމްކުރޭ، ނޭޖަހާ، ޑިލީޓް، އަދި ޕާސަނަލް އިންފޮމޭޝަން ވިއްކުމުން އާއްޗް އައުޓް ވުމުގެ ޙައްޤު ހިމެނޭ. ކުންފުނިތަކުން ޑޭޓާ ސަގުކުރުމުގެ ޕްރެކްޓިސްތަކާ މެދު ސާފު ޑިސްކްލޯޝަރ ދޭންވާނެ އަދި އަކުރަ ސެކިއުރިޓީ މިންހާސް ތައް ޢަމަލުކުރަންވާނެއެވެ.'
      }
    },
    {
      id: 6,
      type: 'legal_article',
      title: 'AI and Legal Ethics: Emerging Challenges',
      dhivehi_title: 'އޭއައި އަދި ލީގަލް އެތިކްސް: އުފެދޭ ގޮންޖެހުން',
      jurisdiction: 'International',
      date: '2024-06-20',
      citation: 'Tech Law Review 2024 Vol. 15',
      keywords: ['artificial intelligence', 'ethics', 'legal profession', 'technology'],
      body: {
        en: 'This comprehensive analysis explores the ethical implications of AI adoption in legal practice, addressing concerns about bias, accountability, and professional responsibility. The article examines case studies, regulatory frameworks, and best practices for ethical AI implementation in law firms.',
        dv: 'މި ފުރިހަމަ ތަޙްލީލުން ލީގަލް ޕްރެކްޓިސްގައި އޭއައި ބޭނުންކުރުމުގެ އެތިކަލް އަސަރުތައް ބަލާ، ބަޔާސް، އެކައުންޓެބިލިޓީ، އަދި ޕްރޮފެޝަނަލް ރެސްޕޮންސިބިލިޓީގެ ކަންބޮޑުވުންތައް ކުރިއަށް ގެންދޭ. މި އަރޓިކަލްގައި ކޭސް ސްޓަޑީ، ރެގިއުލޭޓަރީ ފްރޭމްވާކް، އަދި ލޯ ފާމްތަކުގައި އެތިކަލް އޭއައި އިމްޕްލިމަންޓޭޝަނަށް ރަނގަޅު ގޮތްތައް ބައްލަވާނެއެވެ.'
      }
    }
  ];
  };

  const [legalDocuments, setLegalDocuments] = useState(() => loadDocumentsFromStorage());

  // Save documents to localStorage whenever legalDocuments changes
  useEffect(() => {
    try {
      localStorage.setItem('aharenge_documents', JSON.stringify(legalDocuments));
      console.log('Documents saved to localStorage');
    } catch (error) {
      console.error('Error saving documents to storage:', error);
      showNotification('Warning: Documents could not be saved locally', 'warning');
    }
  }, [legalDocuments]);
  
  // Initialize results with all documents on first load
  useEffect(() => {
    if (isAuthenticated) {
      setResults(legalDocuments);
    }
  }, [isAuthenticated, legalDocuments]);
  
  // Calculate next ID safely
  const nextId = legalDocuments.reduce((max, doc) => Math.max(max, doc.id), 0) + 1;
  
  // Enhanced new document state
  const [newDoc, setNewDoc] = useState({
    type: 'case_law',
    title: '',
    dhivehi_title: '',
    jurisdiction: '',
    date: '',
    citation: '',
    keywords: '',
    judges: '',
    introduction: { en: '', dv: '' },
    ratio: { en: '', dv: '' },
    body: { en: '', dv: '' },
    abstracts: [{ en: '', dv: '', page: '', paragraph: '' }]
  });

  // Auth0 Integration Functions
  
  // Initialize Auth0 on component mount
  useEffect(() => {
    initializeAuth0();
  }, []);

  const initializeAuth0 = async () => {
    try {
      setIsLoading(true);
      
      // Check for existing token in localStorage
      const storedToken = localStorage.getItem('auth0_access_token');
      const storedUser = localStorage.getItem('auth0_user');
      
      if (storedToken && storedUser) {
        // Verify token is still valid (simplified check)
        try {
          const userInfo = JSON.parse(storedUser);
          setAccessToken(storedToken);
          setCurrentUser({
            id: userInfo.sub,
            name: userInfo.name || userInfo.email,
            email: userInfo.email,
            role: userInfo['https://aharenge.com/roles']?.[0] || 'user', // Custom claim for role
            picture: userInfo.picture
          });
          setIsAuthenticated(true);
          showNotification(`Welcome back, ${userInfo.name || userInfo.email}!`, 'success');
        } catch (e) {
          // Clear invalid stored data
          localStorage.removeItem('auth0_access_token');
          localStorage.removeItem('auth0_user');
        }
      }
      
      // Check for Auth0 callback (code in URL)
      const urlParams = new URLSearchParams(window.location.search);
      const authCode = urlParams.get('code');
      const state = urlParams.get('state');
      const storedState = localStorage.getItem('auth0_state');
      
      if (authCode) {
        // Verify the state parameter to prevent CSRF attacks
        if (state && state === storedState) {
          await handleAuthCallback(authCode);
        } else {
          console.error('State mismatch - possible CSRF attack');
          setAuthError('Authentication failed - security validation error');
          showNotification('Authentication failed - security error', 'error');
        }
      }
      
    } catch (error) {
      console.error('Auth0 initialization error:', error);
      setAuthError('Failed to initialize authentication');
    } finally {
      setIsLoading(false);
    }
  };

  const handleAuthCallback = async (code) => {
    try {
      showNotification('Processing login...', 'info');
      
      // Exchange code for tokens using Auth0 token endpoint
      const verifier = localStorage.getItem('auth0_code_verifier');
      if (!verifier) {
        throw new Error('Code verifier not found');
      }
      
      const tokenResponse = await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          grant_type: 'authorization_code',
          client_id: AUTH0_CLIENT_ID,
          code_verifier: verifier,
          code: code,
          redirect_uri: AUTH0_REDIRECT_URI
        })
      }).catch(error => {
        console.error('Network error connecting to Auth0:', error);
        throw new Error('Cannot connect to Auth0 server. Please check your Auth0 domain configuration.');
      });
      
      if (!tokenResponse.ok) {
        throw new Error('Failed to exchange code for tokens');
      }
      
      const tokens = await tokenResponse.json();
      
      // Get user information using the access token
      const userInfoResponse = await fetch(`https://${AUTH0_DOMAIN}/userinfo`, {
        headers: {
          'Authorization': `Bearer ${tokens.access_token}`
        }
      });
      
      if (!userInfoResponse.ok) {
        throw new Error('Failed to fetch user information');
      }
      
      const userInfo = await userInfoResponse.json();
      
      // Save tokens and user info to localStorage
      localStorage.setItem('auth0_access_token', tokens.access_token);
      localStorage.setItem('auth0_id_token', tokens.id_token);
      localStorage.setItem('auth0_user', JSON.stringify(userInfo));
      
      // Set user in application state
      setAccessToken(tokens.access_token);
      setCurrentUser({
        id: userInfo.sub,
        name: userInfo.name || userInfo.email,
        email: userInfo.email,
        role: userInfo['https://aharenge.com/roles']?.[0] || 'user', // Custom claim for role
        picture: userInfo.picture
      });
      
      setIsAuthenticated(true);
      
      // Clear the URL parameters
      window.history.replaceState({}, document.title, window.location.pathname);
      
      showNotification(`Welcome, ${userInfo.name || userInfo.email}!`, 'success');
    } catch (error) {
      console.error('Auth callback error:', error);
      setAuthError('Failed to complete login');
      showNotification('Authentication failed. Please try again.', 'error');
    }
  };

  // Generate a code verifier for PKCE (Proof Key for Code Exchange)
  const generateCodeVerifier = () => {
    const array = new Uint8Array(32);
    window.crypto.getRandomValues(array);
    return btoa(String.fromCharCode.apply(null, array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  };
  
  // Generate a code challenge from the code verifier
  const generateCodeChallenge = async (codeVerifier) => {
    const encoder = new TextEncoder();
    const data = encoder.encode(codeVerifier);
    const digest = await window.crypto.subtle.digest('SHA-256', data);
    return btoa(String.fromCharCode.apply(null, new Uint8Array(digest)))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  };
  
  const loginWithAuth0 = async () => {
    try {
      // First, test if we can reach the Auth0 domain
      const testUrl = `https://${AUTH0_DOMAIN}/.well-known/openid_configuration`;
      
      try {
        const testResponse = await fetch(testUrl, { method: 'HEAD' });
        if (!testResponse.ok) {
          throw new Error('Auth0 domain not reachable');
        }
      } catch (testError) {
        console.error('Auth0 domain test failed:', testError);
        showNotification('Cannot connect to Auth0. Please check your domain configuration or use Demo Login instead.', 'error');
        return;
      }
      
      // Generate PKCE code verifier and challenge
      const codeVerifier = generateCodeVerifier();
      const codeChallenge = await generateCodeChallenge(codeVerifier);
      
      // Store code verifier in localStorage for later use
      localStorage.setItem('auth0_code_verifier', codeVerifier);
      
      // Generate state parameter to prevent CSRF attacks
      const state = generateRandomState();
      localStorage.setItem('auth0_state', state);
      
      // Build Auth0 authorization URL with PKCE
      const authUrl = `https://${AUTH0_DOMAIN}/authorize?` +
        `response_type=code&` +
        `client_id=${AUTH0_CLIENT_ID}&` +
        `redirect_uri=${encodeURIComponent(AUTH0_REDIRECT_URI)}&` +
        `scope=openid profile email&` +
        `state=${state}&` +
        `code_challenge=${codeChallenge}&` +
        `code_challenge_method=S256`;
      
      // Redirect to Auth0 login
      window.location.href = authUrl;
    } catch (error) {
      console.error('Error initiating Auth0 login:', error);
      showNotification('Auth0 connection failed. Please use Demo Login or check your Auth0 configuration.', 'error');
    }
  };

  const generateRandomState = () => {
    return Math.random().toString(36).substring(2) + Date.now().toString(36);
  };

  const handleLogout = () => {
    // Clear all Auth0-related items from local storage
    localStorage.removeItem('auth0_access_token');
    localStorage.removeItem('auth0_id_token');
    localStorage.removeItem('auth0_user');
    localStorage.removeItem('auth0_state');
    localStorage.removeItem('auth0_code_verifier');
    
    // Reset application state
    setIsAuthenticated(false);
    setCurrentUser(null);
    setAccessToken(null);
    setActiveTab('dashboard');
    setResults([]);
    
    // Build Auth0 logout URL
    const logoutUrl = `https://${AUTH0_DOMAIN}/v2/logout?` +
      `client_id=${AUTH0_CLIENT_ID}&` +
      `returnTo=${encodeURIComponent(window.location.origin)}`;
    
    showNotification('Logged out successfully', 'info');
    
    // Redirect to Auth0 logout endpoint
    window.location.href = logoutUrl;
  };

  // Alternative: Simple demo login (fallback if Auth0 not configured)
  const demoLogin = async () => {
    try {
      setIsLoading(true);
      
      // Simulate API call delay
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Create demo user
      const demoUser = {
        id: 'demo_' + Date.now(),
        name: 'Demo User',
        email: 'demo@aharenge.com',
        role: 'admin', // Give demo user admin privileges
        picture: null
      };
      
      setCurrentUser(demoUser);
      setIsAuthenticated(true);
      setShowLogin(false);
      setActiveTab('dashboard');
      
      // Store demo session
      localStorage.setItem('demo_user', JSON.stringify(demoUser));
      
      showNotification(`Welcome, ${demoUser.name}!`, 'success');
      
    } catch (error) {
      setAuthError('Demo login failed');
    } finally {
      setIsLoading(false);
    }
  };

  // Custom SVG Icons
  const SearchIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
    </svg>
  );
  
  const BookOpenIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
      <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
    </svg>
  );
  
  const DashboardIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
      <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
    </svg>
  );
  
  const PlusIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 010 2h-3v3a1 1 0 01-2 0v-3H6a1 1 0 010-2h3V6a1 1 0 011-1z" clipRule="evenodd" />
    </svg>
  );
  
  const XIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 011.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
    </svg>
  );
  
  const FileTextIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1-9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clipRule="evenodd" />
    </svg>
  );
  
  const CalendarIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
    </svg>
  );
  
  const MapPinIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
    </svg>
  );
  
  const TagIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
      <path d="M7.5 3a1 1 0 011 .293L11 6h3a1 1 0 011 1v1h1a1 1 0 011 1v6a1 1 0 01-1 1h-1v1a1 1 0 01-1 1h-6a1 1 0 01-1-1v-2a1 1 0 01-.293-1L11 13H6a1 1 0 01-1-1V3a1 1 0 011-1z" />
    </svg>
  );
  
  const EyeIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
      <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
    </svg>
  );
  
  const TrashIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
    </svg>
  );
  
  const FilterIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-3.586L3.293 8.707A1 1 0 013 8V3z" clipRule="evenodd" />
    </svg>
  );
  
  const DownloadIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM14 11a1 1 0 00-1 1v3H7v-3a1 1 0 00-1-1h-1a1 1 0 000 2h1v3a1 1 0 001 1h4a1 1 0 001-1v-3h1a1 1 0 000-2H4a1 1 0 00-1 1v3a1 1 0 001 1h12a1 1 0 001-1v-3a1 1 0 00-1-1h-1z" clipRule="evenodd" />
    </svg>
  );
  
  const DocumentIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H7a1 1 0 01-1-1v-4z" clipRule="evenodd" />
    </svg>
  );
  
  const UserIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
    </svg>
  );
  
  const LogoutIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h6a1 1 0 000-2H4V5h5a1 1 0 000-2H3zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" />
    </svg>
  );
  
  const LoginIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1h1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clipRule="evenodd" />
    </svg>
  );

  // Auto-hide notifications
  useEffect(() => {
    if (notification.message) {
      const timer = setTimeout(() => {
        setNotification({ message: '', type: '' });
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [notification]);
  
  const showNotification = (message, type = 'success') => {
    setNotification({ message, type });
  };

  // CSV Export function
  const exportToCSV = () => {
    const headers = ['ID', 'Type', 'Title', 'Jurisdiction', 'Date', 'Citation', 'Keywords', 'Judges'];
    const csvData = legalDocuments.map(doc => [
      doc.id,
      doc.type,
      doc.title || doc.dhivehi_title,
      doc.jurisdiction,
      doc.date,
      doc.citation || 'N/A',
      doc.keywords.join('; '),
      doc.judges ? doc.judges.join('; ') : 'N/A'
    ]);
    
    const csvContent = [headers, ...csvData]
      .map(row => row.map(field => `"${field}"`).join(','))
      .join('\n');
    
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'aharenge_documents.csv';
    link.click();
    window.URL.revokeObjectURL(url);
    showNotification('CSV export completed', 'success');
  };

  // PDF Export function - simplified approach
  const exportToPDF = () => {
    try {
      // Simple text-based PDF export that works reliably
      const pdfContent = legalDocuments.map((doc, index) => {
        let content = `${index + 1}. ${doc.title || doc.dhivehi_title}\n`;
        content += `Jurisdiction: ${doc.jurisdiction}\n`;
        content += `Date: ${doc.date}\n`;
        if (doc.citation) content += `Citation: ${doc.citation}\n`;
        if (doc.keywords?.length) content += `Keywords: ${doc.keywords.join(', ')}\n`;
        if (doc.judges?.length) content += `Judges: ${doc.judges.join(', ')}\n`;
        
        if (doc.type === 'case_law') {
          if (doc.introduction?.en) content += `\nIntroduction:\n${doc.introduction.en}\n`;
          if (doc.ratio?.en) content += `\nRatio Decidendi:\n${doc.ratio.en}\n`;
        } else if (doc.body?.en) {
          content += `\nContent:\n${doc.body.en}\n`;
        }
        
        return content + '\n' + '='.repeat(80) + '\n\n';
      }).join('');
      
      const fullContent = `AHARENGE DATABASE - DOCUMENT EXPORT
Generated: ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}

${'='.repeat(80)}

${pdfContent}`;
      
      // Create and download as PDF-like text file
      const blob = new Blob([fullContent], { type: 'application/pdf' });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `aharenge_documents_${new Date().toISOString().split('T')[0]}.pdf`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      showNotification('Document export completed successfully', 'success');
    } catch (error) {
      console.error('Export error:', error);
      showNotification('Export failed. Please try again.', 'error');
    }
  };
  
  const parseQuery = (input) => {
    // Enhanced parsing to handle both English and Dhivehi text
    const tokens = input.match(/"[^"]+"|\S+/g) || [];
    const parsed = { keywords: [], jurisdictions: [] };
    const jurisdictionRegex = /\b(california|new york|ny|federal|maldives|mv|ކެލިފޯނިޔާ|ނިއު ޔޯކް|ފެޑެރަލް|ދިވެހިރާއްޖެ)\b/gi;
    let match;
    
    while ((match = jurisdictionRegex.exec(input)) !== null) {
      parsed.jurisdictions.push(match[0].toLowerCase());
    }
    
    tokens.forEach(token => {
      if (token.startsWith('"') && token.endsWith('"')) {
        // Quoted phrase - keep as is (remove quotes)
        parsed.keywords.push(token.slice(1, -1));
      } else {
        // Individual words - split on whitespace but preserve Dhivehi characters
        const words = token.split(/\s+/).filter(word => word.trim().length > 0);
        parsed.keywords.push(...words);
      }
    });
    
    // Remove empty keywords and duplicates
    parsed.keywords = [...new Set(parsed.keywords.filter(keyword => keyword.trim().length > 0))];
    
    return parsed;
  };

  // Database Backup and Restore Functions
  const exportDatabase = () => {
    try {
      const databaseExport = {
        version: '1.0',
        exportDate: new Date().toISOString(),
        documentCount: legalDocuments.length,
        documents: legalDocuments
      };
      
      const dataStr = JSON.stringify(databaseExport, null, 2);
      const blob = new Blob([dataStr], { type: 'application/json' });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `aharenge_database_backup_${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      showNotification(`Database backup completed! ${legalDocuments.length} documents exported.`, 'success');
    } catch (error) {
      console.error('Export error:', error);
      showNotification('Failed to export database. Please try again.', 'error');
    }
  };

  const importDatabase = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const importedData = JSON.parse(e.target.result);
        
        // Validate the imported data
        if (!importedData.documents || !Array.isArray(importedData.documents)) {
          throw new Error('Invalid file format');
        }
        
        // Ask user for confirmation
        const confirmMessage = `This will replace your current database with ${importedData.documents.length} documents from the backup file. Your current ${legalDocuments.length} documents will be lost. Are you sure?`;
        
        if (window.confirm(confirmMessage)) {
          setLegalDocuments(importedData.documents);
          setResults(importedData.documents);
          showNotification(`Database restored successfully! ${importedData.documents.length} documents imported.`, 'success');
        }
      } catch (error) {
        console.error('Import error:', error);
        showNotification('Failed to import database. Please check the file format.', 'error');
      }
    };
    reader.readAsText(file);
    
    // Reset the input so the same file can be selected again
    event.target.value = '';
  };
  
  // Enhanced full-text search function
  const searchInText = (text, searchTerms) => {
    if (!text || !searchTerms.length) return false;
    const normalizedText = text.toLowerCase().trim();
    return searchTerms.some(term => normalizedText.includes(term.toLowerCase()));
  };

  const search = () => {
    if (!query.trim()) {
      showNotification('Please enter a search query', 'error');
      return;
    }
    
    const { keywords, jurisdictions } = parseQuery(query);
    const matchedDocuments = [];
    
    // Enhanced search that looks through all text content
    legalDocuments.forEach(doc => {
      let hasMatch = false;
      
      // Search in basic fields
      if (searchInText(doc.title, keywords) || 
          searchInText(doc.dhivehi_title, keywords) ||
          searchInText(doc.citation, keywords) ||
          searchInText(doc.jurisdiction, keywords)) {
        hasMatch = true;
      }

      // Search in keywords array
      if (!hasMatch && doc.keywords.some(keyword => 
          keywords.some(term => keyword.toLowerCase().includes(term.toLowerCase())))) {
        hasMatch = true;
      }

      // Search in judges array (for case law)
      if (!hasMatch && doc.judges && doc.judges.some(judge => 
          keywords.some(term => judge.toLowerCase().includes(term.toLowerCase())))) {
        hasMatch = true;
      }

      // Search in case law specific fields
      if (!hasMatch && doc.type === 'case_law') {
        // Search in introduction
        if (doc.introduction) {
          if (searchInText(doc.introduction.en, keywords) || 
              searchInText(doc.introduction.dv, keywords)) {
            hasMatch = true;
          }
        }

        // Search in ratio decidendi
        if (!hasMatch && doc.ratio) {
          if (searchInText(doc.ratio.en, keywords) || 
              searchInText(doc.ratio.dv, keywords)) {
            hasMatch = true;
          }
        }

        // Search in abstracts
        if (!hasMatch && doc.abstracts) {
          for (const abstract of doc.abstracts) {
            if (searchInText(abstract.en, keywords) || 
                searchInText(abstract.dv, keywords) ||
                searchInText(abstract.page, keywords) ||
                searchInText(abstract.paragraph, keywords)) {
              hasMatch = true;
              break;
            }
          }
        }
      }

      // Search in body content (for statutes and legal articles)
      if (!hasMatch && (doc.type === 'statute' || doc.type === 'legal_article') && doc.body) {
        if (searchInText(doc.body.en, keywords) || 
            searchInText(doc.body.dv, keywords)) {
          hasMatch = true;
        }
      }

      if (hasMatch) {
        matchedDocuments.push(doc);
      }
    });
    
    let filteredResults = matchedDocuments;
    
    // Apply filters
    if (filters.type) {
      filteredResults = filteredResults.filter(doc => doc.type === filters.type);
    }
    
    if (filters.jurisdiction) {
      filteredResults = filteredResults.filter(doc => 
        doc.jurisdiction.toLowerCase().includes(filters.jurisdiction.toLowerCase())
      );
    }
    
    if (filters.dateFrom) {
      filteredResults = filteredResults.filter(doc => new Date(doc.date) >= new Date(filters.dateFrom));
    }
    
    if (filters.dateTo) {
      filteredResults = filteredResults.filter(doc => new Date(doc.date) <= new Date(filters.dateTo));
    }
    
    if (jurisdictions.length > 0) {
      filteredResults = filteredResults.filter(doc =>
        jurisdictions.includes(doc.jurisdiction.toLowerCase())
      );
    }
    
    setResults(filteredResults);
    setActiveTab('search');
    
    // Add to search history
    if (query.trim() && !searchHistory.includes(query.trim())) {
      setSearchHistory(prev => [query.trim(), ...prev.slice(0, 4)]);
    }
    
    showNotification(`Found ${filteredResults.length} results`, 'info');
  };
  
  const handleAddDocument = () => {
    const { title, dhivehi_title, jurisdiction, date, citation, keywords, judges, introduction, ratio, body, abstracts } = newDoc;
    
    // Validation
    if (!jurisdiction.trim() || !date.trim() || !keywords.trim()) {
      showNotification("Please fill out all mandatory fields: Jurisdiction, Date, Keywords", 'error');
      return;
    }
    
    if (!(title.trim() || dhivehi_title.trim())) {
      showNotification("Either English or Dhivehi title is required.", 'error');
      return;
    }
    
    // Type-specific validation
    if (newDoc.type === 'case_law') {
      if (!(introduction.en.trim() || introduction.dv.trim())) {
        showNotification("Either English or Dhivehi Introduction is required.", 'error');
        return;
      }
      
      if (!(ratio.en.trim() || ratio.dv.trim())) {
        showNotification("Either English or Dhivehi Ratio is required for case law documents.", 'error');
        return;
      }
      
      const validAbstracts = abstracts.filter(ab => ab.en.trim() || ab.dv.trim());
      if (validAbstracts.length === 0) {
        showNotification("At least one abstract (English or Dhivehi) is required.", 'error');
        return;
      }
      
      for (let i = 0; i < validAbstracts.length; i++) {
        const ab = validAbstracts[i];
        if (!ab.page.trim() || !ab.paragraph.trim()) {
          showNotification(`Abstract #${i + 1} requires both Page and Paragraph numbers.`, 'error');
          return;
        }
      }
    } else if (newDoc.type === 'statute' || newDoc.type === 'legal_article') {
      if (!(body.en.trim() || body.dv.trim())) {
        showNotification("Either English or Dhivehi Body is required for this document type.", 'error');
        return;
      }
    }
    
    const keywordList = keywords.split(',').map(k => k.trim().toLowerCase()).filter(Boolean);
    const judgesList = newDoc.type === 'case_law' && judges ? judges.split(',').map(j => j.trim()).filter(Boolean) : undefined;
    
    const newDocument = {
      id: nextId,
      type: newDoc.type,
      title: title.trim(),
      dhivehi_title: dhivehi_title.trim(),
      jurisdiction: jurisdiction.trim(),
      date: date.trim(),
      citation: newDoc.type === 'case_law' ? citation.trim() : undefined,
      keywords: keywordList,
      judges: judgesList,
      introduction: newDoc.type === 'case_law' ? {
        en: introduction.en.trim(),
        dv: introduction.dv.trim()
      } : undefined,
      ratio: newDoc.type === 'case_law' ? {
        en: ratio.en.trim(),
        dv: ratio.dv.trim()
      } : undefined,
      body: (newDoc.type === 'statute' || newDoc.type === 'legal_article') ? {
        en: body.en.trim(),
        dv: body.dv.trim()
      } : undefined,
      abstracts: newDoc.type === 'case_law' ? abstracts.filter(ab => ab.en.trim() || ab.dv.trim()).map(ab => ({
        en: ab.en.trim(),
        dv: ab.dv.trim(),
        page: ab.page.trim(),
        paragraph: ab.paragraph.trim()
      })) : undefined
    };
    
    setLegalDocuments(prev => [...prev, newDocument]);
    setNewDoc({
      type: 'case_law',
      title: '',
      dhivehi_title: '',
      jurisdiction: '',
      date: '',
      citation: '',
      keywords: '',
      judges: '',
      introduction: { en: '', dv: '' },
      ratio: { en: '', dv: '' },
      body: { en: '', dv: '' },
      abstracts: [{ en: '', dv: '', page: '', paragraph: '' }]
    });
    
    showNotification("Document added successfully!", 'success');
    setShowAddForm(false);
  };
  
  const removeDocument = (id) => {
    setLegalDocuments(prev => prev.filter(doc => doc.id !== id));
    showNotification("Document removed successfully.", 'success');
  };
  
  const exportData = () => {
    const dataStr = JSON.stringify(legalDocuments, null, 2);
    const dataUri = 'application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
    const exportFileDefaultName = 'aharenge_documents.json';
    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();
  };
  
  const clearFilters = () => {
    setFilters({ type: '', jurisdiction: '', dateFrom: '', dateTo: '' });
    showNotification('Filters cleared', 'info');
  };
  
  const addAbstractField = () => {
    setNewDoc({
      ...newDoc,
      abstracts: [...newDoc.abstracts, { en: '', dv: '', page: '', paragraph: '' }]
    });
  };
  
  const updateAbstractField = (index, field, value) => {
    const updatedAbstracts = [...newDoc.abstracts];
    updatedAbstracts[index][field] = value;
    setNewDoc({ ...newDoc, abstracts: updatedAbstracts });
  };
  
  const updateIntroField = (lang, value) => {
    setNewDoc({
      ...newDoc,
      introduction: { ...newDoc.introduction, [lang]: value }
    });
  };
  
  const updateRatioField = (lang, value) => {
    setNewDoc({
      ...newDoc,
      ratio: { ...newDoc.ratio, [lang]: value }
    });
  };
  
  const updateBodyField = (lang, value) => {
    setNewDoc({
      ...newDoc,
      body: { ...newDoc.body, [lang]: value }
    });
  };

  // Dashboard statistics
  const getStatistics = () => {
    const totalDocs = legalDocuments.length;
    const caseLawCount = legalDocuments.filter(doc => doc.type === 'case_law').length;
    const statuteCount = legalDocuments.filter(doc => doc.type === 'statute').length;
    const articleCount = legalDocuments.filter(doc => doc.type === 'legal_article').length;
    
    const recentDocs = legalDocuments
      .sort((a, b) => new Date(b.date) - new Date(a.date))
      .slice(0, 3);
    
    const jurisdictions = [...new Set(legalDocuments.map(doc => doc.jurisdiction))];
    
    return {
      totalDocs,
      caseLawCount,
      statuteCount,
      articleCount,
      recentDocs,
      jurisdictions: jurisdictions.length
    };
  };

  const quickSearchSuggestions = [
    { query: 'contract', description: 'Find contract-related cases' },
    { query: 'California', description: 'Search California jurisdiction' },
    { query: 'employment breach', description: 'Employment law cases' },
    { query: 'privacy data', description: 'Data privacy regulations' }
  ];

  // Loading screen
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <script src="https://cdn.tailwindcss.com/3.4.16"></script>
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black mx-auto mb-4"></div>
          <p className="text-gray-600">Loading Aharenge Database...</p>
        </div>
      </div>
    );
  }

  // Public View Component
  const renderPublicView = () => {
    return (
      <div className="min-h-screen bg-gray-50">
        {/* Public Header */}
        <header className="bg-black text-white shadow-lg">
          <div className="container mx-auto px-4 py-6">
            <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
              <div className="flex items-center space-x-3">
                <div className="bg-gray-800 p-2 rounded-lg">
                  <BookOpenIcon />
                </div>
                <div>
                  <h1 className="text-2xl font-bold">Aharenge Database</h1>
                  <p className="text-gray-300 text-sm">Professional Legal Database</p>
                </div>
              </div>
              
              <div className="flex gap-3">
                <button
                  onClick={loginWithAuth0}
                  className="flex items-center space-x-2 px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-100 transition-colors font-medium"
                >
                  <LoginIcon />
                  <span>Login with Auth0</span>
                </button>
                
                <button
                  onClick={demoLogin}
                  className="flex items-center space-x-2 px-6 py-3 border-2 border-white text-white rounded-lg hover:bg-white hover:text-black transition-colors font-medium"
                >
                  <UserIcon />
                  <span>Demo Login</span>
                </button>
              </div>
            </div>
          </div>
        </header>

        {/* Auth Error Display */}
        {authError && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 text-center">
            <div className="flex items-center justify-between max-w-4xl mx-auto">
              <div>
                <p className="font-medium">Auth0 Connection Issue</p>
                <p className="text-sm">{authError}</p>
                <p className="text-sm mt-1">Try using "Demo Login" to access the application while troubleshooting Auth0.</p>
              </div>
              <button 
                onClick={() => setAuthError('')}
                className="text-red-900 hover:text-red-700 font-medium px-3 py-1 border border-red-300 rounded"
              >
                Dismiss
              </button>
            </div>
          </div>
        )}

        {/* Public Content */}
        <main className="container mx-auto px-4 py-16">
          <div className="text-center max-w-4xl mx-auto">
            <h2 className="text-4xl font-bold text-gray-900 mb-6">
              Professional Legal Database
            </h2>
            <p className="text-xl text-gray-600 mb-12">
              Comprehensive legal database with bilingual support for legal professionals. 
              Organize case law, statutes, and legal articles with advanced search capabilities.
            </p>

            {/* Auth0 Configuration Notice */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-12">
              <h3 className="text-lg font-semibold text-blue-900 mb-3">Authentication Setup</h3>
              <div className="text-left space-y-3 text-blue-800">
                <p><strong>Auth0 Integration Status:</strong></p>
                <div className="bg-yellow-50 border border-yellow-200 rounded p-3 mt-2 mb-3">
                  <p className="text-yellow-800 text-sm">⚠️ <strong>Current Issue:</strong> Auth0 domain "ahnaflegaldatabase.au.auth0.com" is not responding</p>
                </div>
                <p><strong>Troubleshooting Steps:</strong></p>
                <ol className="list-decimal list-inside space-y-2 pl-2 text-sm">
                  <li>Verify your Auth0 domain is correct in your Auth0 dashboard</li>
                  <li>Check if your Auth0 application is properly configured</li>
                  <li>Ensure your Auth0 account is active and the domain exists</li>
                  <li>Add this URL to your Auth0 application's callback URLs:
                    <div className="bg-blue-100 p-2 rounded text-xs font-mono mt-1 ml-2">
                      {window.location.origin}
                    </div>
                  </li>
                </ol>
                <p className="mt-2"><strong>Demo Mode:</strong> Use the "Demo Login" button for immediate access with admin privileges while troubleshooting Auth0.</p>
              </div>
            </div>

            {/* Features Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
              <div className="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
                <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <SearchIcon className="text-gray-800" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-3">Advanced Search</h3>
                <p className="text-gray-600">Powerful search functionality with filters, keywords, and boolean operators for precise document discovery.</p>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
                <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <BookOpenIcon className="text-gray-800" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-3">Bilingual Support</h3>
                <p className="text-gray-600">Full English and Dhivehi language support for comprehensive legal documentation and accessibility.</p>
              </div>

              <div className="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
                <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <DocumentIcon className="text-gray-800" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-3">Document Organization</h3>
                <p className="text-gray-600">Efficiently organize case law, statutes, and legal articles with detailed metadata and categorization.</p>
              </div>
            </div>

            {/* Call to Action */}
            <div className="bg-black text-white rounded-xl p-12">
              <h3 className="text-3xl font-bold mb-4">Ready to Get Started?</h3>
              <p className="text-gray-300 text-lg mb-8">
                Access your legal database dashboard and start organizing your case files today.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  onClick={loginWithAuth0}
                  className="bg-white text-black px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-100 transition-colors"
                >
                  Login with Auth0
                </button>
                <button
                  onClick={demoLogin}
                  className="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-black transition-colors"
                >
                  Try Demo Mode
                </button>
              </div>
            </div>
          </div>
        </main>

        {/* Public Footer */}
        <footer className="bg-black text-white py-8">
          <div className="container mx-auto px-4 text-center">
            <p className="text-gray-300">&copy; 2025 Aharenge Database. All rights reserved.</p>
            <p className="text-gray-400 text-sm mt-2">Professional Legal Database System</p>
          </div>
        </footer>
      </div>
    );
  };

  const renderDashboard = () => {
    const stats = getStatistics();
    
    return (
      <div className="space-y-8">
        {/* Welcome Section */}
        <div className="bg-gradient-to-r from-gray-800 to-black text-white rounded-xl p-8">
          <h2 className="text-3xl font-bold mb-4">Welcome to Aharenge Database</h2>
          <p className="text-gray-100 text-lg mb-6">Your comprehensive legal database solution with bilingual support</p>
          <div className="flex flex-wrap gap-4">
            <button
              onClick={() => setActiveTab('search')}
              className="bg-white text-black px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
            >
              Start Searching
            </button>
            <button
              onClick={() => setShowAddForm(true)}
              className="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-black transition-colors"
            >
              Add New Document
            </button>
          </div>
        </div>

        {/* Local Storage Status */}
        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
          <div className="flex items-center gap-3">
            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <p className="text-green-800 font-medium">Your documents are automatically saved locally</p>
              <p className="text-green-600 text-sm">All documents persist between browser sessions. Use "Backup Database" to save to your computer.</p>
            </div>
          </div>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total Documents</p>
                <p className="text-3xl font-bold text-gray-900">{stats.totalDocs}</p>
              </div>
              <div className="bg-gray-100 p-3 rounded-lg">
                <DocumentIcon className="text-gray-800" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Case Law</p>
                <p className="text-3xl font-bold text-gray-900">{stats.caseLawCount}</p>
              </div>
              <div className="bg-gray-100 p-3 rounded-lg">
                <BookOpenIcon className="text-gray-800" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Statutes</p>
                <p className="text-3xl font-bold text-gray-900">{stats.statuteCount}</p>
              </div>
              <div className="bg-gray-100 p-3 rounded-lg">
                <FileTextIcon className="text-gray-800" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Jurisdictions</p>
                <p className="text-3xl font-bold text-gray-900">{stats.jurisdictions}</p>
              </div>
              <div className="bg-gray-100 p-3 rounded-lg">
                <MapPinIcon className="text-gray-800" />
              </div>
            </div>
          </div>
        </div>

        {/* Quick Search & Recent Documents */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Quick Search */}
          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <h3 className="text-xl font-semibold text-gray-900 mb-4">Quick Search</h3>
            <div className="space-y-3">
              {quickSearchSuggestions.map((suggestion, index) => (
                <div
                  key={index}
                  onClick={() => {
                    setQuery(suggestion.query);
                    search();
                  }}
                  className="p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900">"{suggestion.query}"</p>
                      <p className="text-sm text-gray-600">{suggestion.description}</p>
                    </div>
                    <SearchIcon className="text-gray-400" />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Recent Documents */}
          <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-semibold text-gray-900">Recent Documents</h3>
              <button
                onClick={() => setActiveTab('library')}
                className="text-gray-800 hover:text-black text-sm font-medium"
              >
                View All
              </button>
            </div>
            <div className="space-y-4">
              {stats.recentDocs.map((doc) => (
                <div
                  key={doc.id}
                  onClick={() => setSelectedDoc(doc)}
                  className="p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <p className="font-medium text-gray-900 truncate">
                        {doc.title || doc.dhivehi_title}
                      </p>
                      <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
                        <span className="flex items-center gap-1">
                          <MapPinIcon className="h-4 w-4" />
                          {doc.jurisdiction}
                        </span>
                        <span className="flex items-center gap-1">
                          <CalendarIcon className="h-4 w-4" />
                          {new Date(doc.date).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                      doc.type === 'case_law' 
                        ? 'bg-gray-100 text-gray-800' 
                        : doc.type === 'statute'
                          ? 'bg-gray-200 text-gray-900'
                          : 'bg-gray-100 text-gray-800'
                    }`}>
                      {doc.type === 'case_law' ? 'CASE' : doc.type === 'statute' ? 'STATUTE' : 'ARTICLE'}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* System Features */}
        <div className="bg-white rounded-lg shadow-sm p-8 border border-gray-200">
          <h3 className="text-xl font-semibold text-gray-900 mb-6">System Features</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                <SearchIcon className="text-gray-800" />
              </div>
              <h4 className="font-semibold text-gray-900 mb-2">Advanced Search</h4>
              <p className="text-gray-600 text-sm">Powerful search with filters, keywords, and boolean operators</p>
            </div>
            <div className="text-center">
              <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                <BookOpenIcon className="text-gray-800" />
              </div>
              <h4 className="font-semibold text-gray-900 mb-2">Bilingual Support</h4>
              <p className="text-gray-600 text-sm">Full English and Dhivehi language support for all documents</p>
            </div>
            <div className="text-center">
              <div className="bg-gray-100 p-4 rounded-lg w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                <FileTextIcon className="text-gray-800" />
              </div>
              <h4 className="font-semibold text-gray-900 mb-2">Database Management</h4>
              <p className="text-gray-600 text-sm">Organize case law, statutes, and legal articles efficiently</p>
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  const renderContent = () => {
    if (activeTab === 'dashboard') {
      return renderDashboard();
    } else if (activeTab === 'search') {
      return (
        <div className="space-y-6">
          {/* Search Bar */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex gap-3 mb-4 flex-col sm:flex-row">
              <div className="relative flex-grow">
                <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                  <SearchIcon />
                </div>
                <input
                  type="text"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && search()}
                  placeholder='Try: "contract AND California" or "employment breach"'
                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                />
              </div>
              <button
                onClick={search}
                className="px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors font-medium whitespace-nowrap"
              >
                Search
              </button>
              <button
                onClick={() => setShowFilters(!showFilters)}
                className="px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center"
                aria-label="Toggle filters"
              >
                <FilterIcon />
              </button>
            </div>
            
            {/* Search History */}
            {searchHistory.length > 0 && (
              <div className="mb-4">
                <p className="text-sm text-gray-600 mb-2">Recent searches:</p>
                <div className="flex flex-wrap gap-2">
                  {searchHistory.map((term, index) => (
                    <button
                      key={index}
                      onClick={() => setQuery(term)}
                      className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors"
                    >
                      {term}
                    </button>
                  ))}
                </div>
              </div>
            )}
            
            {/* Advanced Filters */}
            {showFilters && (
              <div className="border-t pt-4 mt-4">
                <h4 className="font-medium mb-3">Advanced Filters</h4>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Document Type</label>
                    <select
                      value={filters.type}
                      onChange={(e) => setFilters({...filters, type: e.target.value})}
                      className="w-full p-2 border border-gray-300 rounded-lg"
                    >
                      <option value="">All Types</option>
                      <option value="case_law">Case Law</option>
                      <option value="statute">Statute</option>
                      <option value="legal_article">Legal Article</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Jurisdiction</label>
                    <input
                      type="text"
                      value={filters.jurisdiction}
                      onChange={(e) => setFilters({...filters, jurisdiction: e.target.value})}
                      placeholder="e.g., California"
                      className="w-full p-2 border border-gray-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Date From</label>
                    <input
                      type="date"
                      value={filters.dateFrom}
                      onChange={(e) => setFilters({...filters, dateFrom: e.target.value})}
                      className="w-full p-2 border border-gray-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Date To</label>
                    <input
                      type="date"
                      value={filters.dateTo}
                      onChange={(e) => setFilters({...filters, dateTo: e.target.value})}
                      className="w-full p-2 border border-gray-300 rounded-lg"
                    />
                  </div>
                </div>
                <div className="mt-3">
                  <button
                    onClick={clearFilters}
                    className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
                  >
                    Clear Filters
                  </button>
                </div>
              </div>
            )}
          </div>
          
          {/* Search Results */}
          <div className="bg-white rounded-lg shadow-sm">
            <div className="p-6 border-b border-gray-200">
              <h3 className="text-xl font-semibold text-gray-800">Search Results</h3>
              {results.length > 0 && (
                <p className="text-sm text-gray-600 mt-1">{results.length} documents found</p>
              )}
            </div>
            <div className="p-6">
              {renderResultsTable(results)}
            </div>
          </div>
        </div>
      );
    } else if (activeTab === 'library') {
      return (
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-sm">
            <div className="p-6 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
              <div>
                <h3 className="text-xl font-semibold text-gray-800">Document Library</h3>
                <p className="text-sm text-gray-600 mt-1">{legalDocuments.length} documents total</p>
              </div>
              <div className="flex gap-2">
                {currentUser?.role === 'admin' && (
                  <>
                    <button
                      onClick={exportToCSV}
                      className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-black transition-colors whitespace-nowrap"
                    >
                      <DownloadIcon />
                      Export CSV
                    </button>
                    <button
                      onClick={exportToPDF}
                      className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-600 text-white rounded-lg hover:bg-gray-800 transition-colors whitespace-nowrap"
                    >
                      <DownloadIcon />
                      Export PDF
                    </button>
                  </>
                )}
                
                {/* Database Backup/Restore Section */}
                <div className="flex flex-col sm:flex-row gap-2 border-l border-gray-300 pl-4">
                  <button
                    onClick={exportDatabase}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap"
                  >
                    <DownloadIcon />
                    Backup Database
                  </button>
                  <label className="flex items-center gap-2 px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors whitespace-nowrap cursor-pointer">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>
                    Restore Database
                    <input
                      type="file"
                      accept=".json"
                      onChange={importDatabase}
                      className="hidden"
                    />
                  </label>
                </div>
                
                <button
                  onClick={exportData}
                  className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-400 text-white rounded-lg hover:bg-gray-600 transition-colors whitespace-nowrap"
                >
                  <DownloadIcon />
                  Export JSON
                </button>
              </div>
            </div>
            <div className="p-6">
              {renderResultsTable(legalDocuments, currentUser?.role === 'admin')}
            </div>
          </div>
        </div>
      );
    }
  };
  
  const renderResultsTable = (docs, showActions = false) => {
    if (docs.length === 0) {
      return (
        <div className="text-center py-12">
          <DocumentIcon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <p className="text-gray-600 text-lg">No documents found</p>
          <p className="text-gray-500 text-sm mt-2">Try adjusting your search terms or filters</p>
        </div>
      );
    }
    
    return (
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jurisdiction</th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keywords</th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {docs.map((doc) => (
              <tr key={doc.id} className="hover:bg-gray-50 transition-colors">
                <td className="px-6 py-4">
                  <div>
                    <div className="text-sm font-medium text-gray-900">
                      {doc.title || doc.dhivehi_title}
                    </div>
                    {doc.citation && (
                      <div className="text-sm text-gray-500">{doc.citation}</div>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                    doc.type === 'case_law' 
                      ? 'bg-gray-100 text-gray-800' 
                      : doc.type === 'statute'
                        ? 'bg-gray-200 text-gray-900'
                        : 'bg-gray-100 text-gray-800'
                  }`}>
                    {doc.type === 'case_law' ? 'CASE LAW' : doc.type === 'statute' ? 'STATUTE' : 'LEGAL ARTICLE'}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center text-sm text-gray-900">
                    <MapPinIcon className="mr-1 text-gray-400" />
                    {doc.jurisdiction}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center text-sm text-gray-900">
                    <CalendarIcon className="mr-1 text-gray-400" />
                    {new Date(doc.date).toLocaleDateString()}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <div className="flex flex-wrap gap-1">
                    {doc.keywords.slice(0, 3).map((keyword, idx) => (
                      <span key={idx} className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800">
                        <TagIcon className="mr-1" />
                        {keyword}
                      </span>
                    ))}
                    {doc.keywords.length > 3 && (
                      <span className="text-xs text-gray-500">+{doc.keywords.length - 3} more</span>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center space-x-3">
                    <button
                      onClick={() => setSelectedDoc(doc)}
                      className="text-gray-600 hover:text-gray-900 transition-colors"
                      title="View Details"
                    >
                      <EyeIcon />
                    </button>
                    {showActions && (
                      <button
                        onClick={() => removeDocument(doc.id)}
                        className="text-red-600 hover:text-red-900 transition-colors"
                        title="Remove Document"
                      >
                        <TrashIcon />
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  };

  // If not authenticated, show public view
  if (!isAuthenticated) {
    return renderPublicView();
  }
  
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Load Tailwind and Faruma font */}
      <script src="https://cdn.tailwindcss.com/3.4.16"></script>
      <link href="https://fonts.googleapis.com/css2?family=Faruma&display=swap" rel="stylesheet" />
      
      <style jsx>{`
        .font-faruma {
          font-family: 'Faruma', sans-serif;
        }
      `}</style>
      
      {/* Authenticated Header */}
      <header className="bg-black text-white shadow-lg">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div className="flex items-center space-x-3">
              <div className="bg-gray-800 p-2 rounded-lg">
                <BookOpenIcon />
              </div>
              <div>
                <h1 className="text-2xl font-bold">Aharenge Database</h1>
                <p className="text-gray-300 text-sm">Professional Legal Database</p>
              </div>
            </div>
            
            <div className="flex items-center gap-4">
              <nav className="flex flex-wrap items-center justify-center gap-4 sm:gap-6">
                <button
                  onClick={() => setActiveTab('dashboard')}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
                    activeTab === 'dashboard' ? 'bg-gray-800 font-medium' : 'hover:bg-gray-700'
                  }`}
                >
                  <DashboardIcon />
                  <span>Dashboard</span>
                </button>
                
                <button
                  onClick={() => setActiveTab('search')}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
                    activeTab === 'search' ? 'bg-gray-800 font-medium' : 'hover:bg-gray-700'
                  }`}
                >
                  <SearchIcon />
                  <span>Search</span>
                </button>
                
                <button
                  onClick={() => setActiveTab('library')}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
                    activeTab === 'library' ? 'bg-gray-800 font-medium' : 'hover:bg-gray-700'
                  }`}
                >
                  <FileTextIcon />
                  <span>Library</span>
                </button>
                
                <button
                  onClick={() => setShowAddForm(!showAddForm)}
                  className="flex items-center space-x-2 px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
                >
                  {showAddForm ? <XIcon /> : <PlusIcon />}
                  <span>{showAddForm ? 'Cancel' : 'Add Document'}</span>
                </button>
              </nav>

              {/* User Menu */}
              <div className="flex items-center gap-4 border-l border-gray-700 pl-4">
                <div className="text-right">
                  <p className="text-sm font-medium">{currentUser?.name}</p>
                  <p className="text-xs text-gray-400 capitalize">{currentUser?.role}</p>
                </div>
                {currentUser?.picture && (
                  <img 
                    src={currentUser.picture} 
                    alt="Profile"
                    className="w-8 h-8 rounded-full"
                  />
                )}
                <button
                  onClick={handleLogout}
                  className="flex items-center space-x-2 px-3 py-2 text-gray-300 hover:text-white transition-colors"
                  title="Logout"
                >
                  <LogoutIcon />
                </button>
              </div>
            </div>
          </div>
        </div>
      </header>
      
      {/* Notification */}
      {notification.message && (
        <div className={`px-4 py-3 text-center font-medium ${
          notification.type === 'error' ? 'bg-red-100 text-red-800 border-red-200' :
          notification.type === 'success' ? 'bg-green-100 text-green-800 border-green-200' :
          'bg-blue-100 text-blue-800 border-blue-200'
        } border-b`}>
          {notification.message}
        </div>
      )}
      
      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        {renderContent()}
      </main>
      
      {/* Add Document Form */}
      {showAddForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl">
            <div className="p-6 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h3 className="text-xl font-semibold text-gray-800">Add New Database Entry</h3>
                <button
                  onClick={() => setShowAddForm(false)}
                  className="text-gray-400 hover:text-gray-600 transition-colors"
                  aria-label="Close form"
                >
                  <XIcon />
                </button>
              </div>
            </div>
            
            <div className="p-6 space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto">
              {/* Document Type */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Document Type *</label>
                <select
                  value={newDoc.type}
                  onChange={e => setNewDoc({ ...newDoc, type: e.target.value })}
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                >
                  <option value="case_law">Case Law</option>
                  <option value="statute">Statute</option>
                  <option value="legal_article">Legal Article</option>
                </select>
              </div>
              
              {/* Title Fields */}
              <div>
                <h4 className="text-lg font-medium mb-4">Basic Information</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Title (English)</label>
                    <input
                      type="text"
                      value={newDoc.title}
                      onChange={e => setNewDoc({ ...newDoc, title: e.target.value })}
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Title (ދިވެހި)</label>
                    <input
                      dir="rtl"
                      type="text"
                      value={newDoc.dhivehi_title}
                      onChange={e => setNewDoc({ ...newDoc, dhivehi_title: e.target.value })}
                      className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Jurisdiction *</label>
                    <input
                      type="text"
                      value={newDoc.jurisdiction}
                      onChange={e => setNewDoc({ ...newDoc, jurisdiction: e.target.value })}
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Date *</label>
                    <input
                      type="date"
                      value={newDoc.date}
                      onChange={e => setNewDoc({ ...newDoc, date: e.target.value })}
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                </div>
              </div>
              
              {/* Type-Specific Fields */}
              {newDoc.type === 'case_law' && (
                <>
                  {/* Citation for Case Law */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Citation *</label>
                    <input
                      type="text"
                      value={newDoc.citation}
                      onChange={e => setNewDoc({ ...newDoc, citation: e.target.value })}
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                  
                  {/* Judges Name */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Judges Name</label>
                    <input
                      type="text"
                      value={newDoc.judges}
                      onChange={e => setNewDoc({ ...newDoc, judges: e.target.value })}
                      placeholder="Enter judges separated by commas (e.g., Justice Smith, Justice Johnson)"
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                    <p className="text-sm text-gray-500 mt-1">Enter multiple judges separated by commas</p>
                  </div>
                  
                  {/* Introduction */}
                  <div>
                    <h4 className="text-lg font-medium mb-4">Introduction</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">English</label>
                        <textarea
                          rows="4"
                          value={newDoc.introduction.en}
                          onChange={e => updateIntroField('en', e.target.value)}
                          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                        ></textarea>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">ދިވެހި</label>
                        <textarea
                          dir="rtl"
                          rows="4"
                          value={newDoc.introduction.dv}
                          onChange={e => updateIntroField('dv', e.target.value)}
                          className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                        ></textarea>
                      </div>
                    </div>
                  </div>
                  
                  {/* Ratio Decidendi */}
                  <div>
                    <h4 className="text-lg font-medium mb-4">Ratio Decidendi</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">English</label>
                        <textarea
                          rows="4"
                          value={newDoc.ratio.en}
                          onChange={e => updateRatioField('en', e.target.value)}
                          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                        ></textarea>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">ދިވެހި</label>
                        <textarea
                          dir="rtl"
                          rows="4"
                          value={newDoc.ratio.dv}
                          onChange={e => updateRatioField('dv', e.target.value)}
                          className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                        ></textarea>
                      </div>
                    </div>
                  </div>
                  
                  {/* Abstracts */}
                  <div>
                    <h4 className="text-lg font-medium mb-4">Abstracts</h4>
                    
                    {newDoc.abstracts.map((ab, index) => (
                      <div key={index} className="border border-gray-200 rounded-lg p-4 mb-4 relative">
                        <div className="flex justify-between items-center mb-3">
                          <span className="text-sm font-medium text-gray-700">Abstract #{index + 1}</span>
                          
                          {newDoc.abstracts.length > 1 && (
                            <button
                              onClick={() => {
                                const updated = newDoc.abstracts.filter((_, i) => i !== index);
                                setNewDoc({ ...newDoc, abstracts: updated });
                              }}
                              className="text-red-500 hover:text-red-700 transition-colors"
                              aria-label="Remove abstract"
                            >
                              <XIcon />
                            </button>
                          )}
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Abstract (English)</label>
                            <textarea
                              rows="3"
                              value={ab.en}
                              onChange={e => updateAbstractField(index, 'en', e.target.value)}
                              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                            ></textarea>
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Abstract (ދިވެހި)</label>
                            <textarea
                              dir="rtl"
                              rows="3"
                              value={ab.dv}
                              onChange={e => updateAbstractField(index, 'dv', e.target.value)}
                              className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                            ></textarea>
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Page Number *</label>
                            <input
                              type="text"
                              value={ab.page}
                              onChange={e => updateAbstractField(index, 'page', e.target.value)}
                              placeholder="e.g., p. 123"
                              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                            />
                          </div>
                          
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Paragraph Number *</label>
                            <input
                              type="text"
                              value={ab.paragraph}
                              onChange={e => updateAbstractField(index, 'paragraph', e.target.value)}
                              placeholder="e.g., ¶ 12"
                              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                    
                    <button
                      type="button"
                      onClick={addAbstractField}
                      className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-800 rounded-lg hover:bg-gray-200 transition-colors"
                    >
                      <PlusIcon />
                      <span>Add Another Abstract</span>
                    </button>
                  </div>
                </>
              )}
              
              {(newDoc.type === 'statute') && (
                <div>
                  <h4 className="text-lg font-medium mb-4">Statute Details</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Body (English)</label>
                      <textarea
                        rows="8"
                        value={newDoc.body.en}
                        onChange={e => updateBodyField('en', e.target.value)}
                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                      ></textarea>
                    </div>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Body (ދިވެހި)</label>
                      <textarea
                        dir="rtl"
                        rows="8"
                        value={newDoc.body.dv}
                        onChange={e => updateBodyField('dv', e.target.value)}
                        className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                      ></textarea>
                    </div>
                  </div>
                </div>
              )}
              
              {(newDoc.type === 'legal_article') && (
                <div>
                  <h4 className="text-lg font-medium mb-4">Article Content</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Body (English)</label>
                      <textarea
                        rows="8"
                        value={newDoc.body.en}
                        onChange={e => updateBodyField('en', e.target.value)}
                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                      ></textarea>
                    </div>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Body (ދިވެހި)</label>
                      <textarea
                        dir="rtl"
                        rows="8"
                        value={newDoc.body.dv}
                        onChange={e => updateBodyField('dv', e.target.value)}
                        className="w-full p-3 border border-gray-300 rounded-lg font-faruma focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                      ></textarea>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Common Fields */}
              <div>
                <h4 className="text-lg font-medium mb-4">Common Fields</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Keywords (comma-separated) *</label>
                    <input
                      type="text"
                      value={newDoc.keywords}
                      onChange={e => setNewDoc({ ...newDoc, keywords: e.target.value })}
                      placeholder="e.g., contract, breach, employment"
                      className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent"
                    />
                  </div>
                </div>
              </div>
              
              {/* Submit Button */}
              <div className="border-t border-gray-200 pt-6">
                <div className="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4">
                  <button
                    onClick={() => setShowAddForm(false)}
                    className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors w-full sm:w-auto"
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleAddDocument}
                    className="px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors w-full sm:w-auto"
                  >
                    Add Document
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Document Detail Modal */}
      {selectedDoc && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white w-full max-w-4xl max-h-[90vh] rounded-lg shadow-xl flex flex-col">
            <div className="p-6 border-b border-gray-200">
              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">
                    {selectedDoc.title || selectedDoc.dhivehi_title}
                  </h2>
                  <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600 mt-2">
                    <div className="flex items-center gap-1">
                      <FileTextIcon />
                      {selectedDoc.citation || 'N/A'}
                    </div>
                    <div className="flex items-center gap-1">
                      <MapPinIcon />
                      {selectedDoc.jurisdiction}
                    </div>
                    <div className="flex items-center gap-1">
                      <CalendarIcon />
                      {new Date(selectedDoc.date).toLocaleDateString()}
                    </div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                      selectedDoc.type === 'case_law' 
                        ? 'bg-gray-100 text-gray-800' 
                        : selectedDoc.type === 'statute'
                          ? 'bg-gray-200 text-gray-900'
                          : 'bg-gray-100 text-gray-800'
                    }`}>
                      {selectedDoc.type === 'case_law' ? 'CASE LAW' : selectedDoc.type === 'statute' ? 'STATUTE' : 'LEGAL ARTICLE'}
                    </span>
                  </div>
                </div>
                
                <button
                  onClick={() => setSelectedDoc(null)}
                  className="text-gray-400 hover:text-gray-600 transition-colors self-end"
                  aria-label="Close details"
                >
                  <XIcon />
                </button>
              </div>
            </div>
            
            <div className="p-6 space-y-6 overflow-y-auto flex-1">
              {/* Keywords */}
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-3">Keywords</h3>
                <div className="flex flex-wrap gap-2">
                  {selectedDoc.keywords.map((keyword, index) => (
                    <span key={index} className="inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                      <TagIcon className="mr-1" />
                      {keyword}
                    </span>
                  ))}
                </div>
              </div>
              
              {/* Judges (for Case Law only) */}
              {selectedDoc.type === 'case_law' && selectedDoc.judges && selectedDoc.judges.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Judges</h3>
                  <div className="flex flex-wrap gap-2">
                    {selectedDoc.judges.map((judge, index) => (
                      <span key={index} className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-black text-white">
                        <UserIcon className="mr-1" />
                        {judge}
                      </span>
                    ))}
                  </div>
                </div>
              )}
              
              {/* Case Law Specific Fields */}
              {selectedDoc.type === 'case_law' && (
                <>
                  {/* Introduction */}
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-3">Introduction</h3>
                    <div className="bg-gray-50 rounded-lg p-4 min-h-[100px] max-h-[200px] overflow-y-auto">
                      <div 
                        dir={selectedDoc.introduction.en ? 'ltr' : 'rtl'} 
                        className={`${selectedDoc.introduction.en ? '' : 'font-faruma'} text-gray-700 leading-relaxed break-words`}
                      >
                        {selectedDoc.introduction.en || selectedDoc.introduction.dv || 'N/A'}
                      </div>
                    </div>
                  </div>
                  
                  {/* Ratio Decidendi */}
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-3">Ratio Decidendi</h3>
                    <div className="bg-gray-50 rounded-lg p-4 min-h-[100px] max-h-[200px] overflow-y-auto">
                      <div 
                        dir={selectedDoc.ratio.en ? 'ltr' : 'rtl'} 
                        className={`${selectedDoc.ratio.en ? '' : 'font-faruma'} text-gray-700 leading-relaxed break-words`}
                      >
                        {selectedDoc.ratio.en || selectedDoc.ratio.dv || 'N/A'}
                      </div>
                    </div>
                  </div>
                  
                  {/* Abstracts */}
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-3">Abstracts</h3>
                    <div className="space-y-4">
                      {selectedDoc.abstracts?.map((ab, index) => (
                        <div key={index} className="border border-gray-200 rounded-lg p-4">
                          <div className="flex items-center gap-2 mb-3 text-sm text-gray-600">
                            <span className="font-medium">{ab.page || 'N/A'}</span>
                            <span className="font-medium">{ab.paragraph || 'N/A'}</span>
                          </div>
                          <div 
                            dir={ab.en ? 'ltr' : 'rtl'} 
                            className={`${ab.en ? '' : 'font-faruma'} text-gray-700 leading-relaxed break-words`}
                          >
                            {ab.en || ab.dv || 'N/A'}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </>
              )}
              
              {/* Statute Specific Fields */}
              {selectedDoc.type === 'statute' && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Statute Text</h3>
                  <div className="bg-gray-50 rounded-lg p-4 min-h-[150px] max-h-[300px] overflow-y-auto">
                    <div 
                      dir={selectedDoc.body?.en ? 'ltr' : 'rtl'} 
                      className={`${selectedDoc.body?.en ? '' : 'font-faruma'} text-gray-700 leading-relaxed break-words`}
                    >
                      {selectedDoc.body?.en || selectedDoc.body?.dv || 'N/A'}
                    </div>
                  </div>
                </div>
              )}
              
              {/* Legal Article Specific Fields */}
              {selectedDoc.type === 'legal_article' && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Article Content</h3>
                  <div className="bg-gray-50 rounded-lg p-4 min-h-[150px] max-h-[300px] overflow-y-auto">
                    <div 
                      dir={selectedDoc.body?.en ? 'ltr' : 'rtl'} 
                      className={`${selectedDoc.body?.en ? '' : 'font-faruma'} text-gray-700 leading-relaxed break-words`}
                    >
                      {selectedDoc.body?.en || selectedDoc.body?.dv || 'N/A'}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
      
      {/* Footer */}
      <footer className="bg-black text-white py-8">
        <div className="container mx-auto px-4 text-center">
          <p className="text-gray-300">&copy; 2025 Aharenge Database. All rights reserved.</p>
          <p className="text-gray-400 text-sm mt-2">Professional Legal Database System</p>
        </div>
      </footer>
    </div>
  );
}